<template>
    <div class="login_container">
         <div class="login_box">
			 <!-- 头像 -->
			 <div class="avatar_box">
				 <img src="../assets/logo.png" alt="" />
			 </div>
			 <!-- 登录表单 -->
			 <el-form  ref="loginFormRef" label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules">
				 <!-- 用户名 -->
			   <el-form-item prop="username">
			     <el-input  v-model="loginForm.username" prefix-icon="iconfont icon-wode "></el-input>
			   </el-form-item>
			   <!-- 密码 -->
			   <el-form-item prop="password">
			     <el-input  v-model="loginForm.password" prefix-icon="iconfont icon-mima" type="password"></el-input>
			   </el-form-item>
			   <!-- 按钮 -->
			   <el-form-item class="btns">
			     <el-button type="primary" @click="login">登录</el-button>
				 <el-button type="info" @click="resetLoginForm">重置</el-button>
			   </el-form-item>
			 </el-form>
		 </div>

    </div>
</template>

<script>
export default {
	data(){
		return{
			loginForm:{
				username:'admin',
				password:'123456'
			},
			loginFormRules:{
				username:[
					{required:true, message:"请输入登录名称", trigger:"blur"},
					{min:3,max:10,message:"长度在3到10个字符",trigger:"blur"},
					
				],
				password:[
					{required:true,  message:"请输入登录密码", trigger:"blur"},
					{min:6,max:15,message:"长度在6到15个字符",trigger:"blur"},
				]
			}
		}
	},
	methods:{
		resetLoginForm(){
			// console.log(this)
			this.$refs.loginFormRef.resetFields();
		},
		login(){
			this.$refs.loginFormRef.validate(async valid=>{
				if(!valid) return;
				const {data:res}=await  this.$http.post("http://127.0.0.1:8888/api/private/v1/login",this.loginForm);
				if(res.meta.status !==200) return this.$message.error('登录失败');
				this.$message.success('登录成功');
				// 建立一个本地存储 
				window.sessionStorage.setItem("token",res.data.token);
				// 编程式导航
				this.$router.push('/home')
			
			});
		}
		
	}
}
</script>

<style scoped lang="less">
.login_container {
   background-color: #2b4b6b;
   height: 100%;
}
.login_box{
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	
	.avatar_box{
		height: 130px;
		width: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 10px;
		background-color: #eee;
		box-shadow: 0 0 10px #ddd;
		position: absolute;
		left: 50%;
		transform: translate(-50%,-45%);
		
		img{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}
.btns{
	display: flex;
	justify-content: flex-end;
	
}
.login_form{
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 0 20px;
	box-sizing: border-box;
}

</style>
